<template>
  <div class="index">
   <!-- 头部区域 --> 
      <el-card class="operate-top-card" >  <!-- shadow="never" -->
          <i class="el-icon-s-order" style="font-size:18px;margin-right:3px"></i>
          <span>订单列表</span>  
      </el-card>

       <el-card class="operate-top-card" > 
          <i class="el-icon-search" style="font-size:18px;margin-right:3px"></i>
          <span>筛选搜索</span> 
          <el-button class="btn-clear" 
            type="primary"  
            size="mini"
            style="float:right;margin-left:10px;"
            @click="handleResetSearch"
           >清空</el-button>

          <el-button class="btn-find"
            type="primary" 
            size="mini" 
            style="float:right;"
            @click="handleSearchList"
          >查询</el-button>

          <div>
            <el-form 
                    ref="orderForm" 
                    :model="listQuery" 
                    label-width="200px"
                    :inline="true"
                    border    
                    style="width: 100%" 
                    @selection-change="handleSelectionChange"
                    >
                
                <el-form-item label="订单编号">
                  <el-input v-model="listQuery.orderSn" placeholder="请输入订单编号"></el-input>
                </el-form-item>
       
                 <el-form-item label="订单状态">
                  <el-select v-model="listQuery.status" placeholder="请选择订单状态">
                  <el-option v-for="item in statusOptions" 
                      :key="item.value"
                      :label="item.label" 
                      :value="item.value"
                      >
                    </el-option>  
                  </el-select>
                </el-form-item>
 
                <el-form-item label="订单分类">
                  <el-select v-model="listQuery.orderType" placeholder="请选择订单分类">
                  <el-option v-for="item in orderTypeOptions" 
                      :key="item.value"
                      :label="item.label" 
                      :value="item.value"
                      >
                    </el-option>  
                  </el-select>
                </el-form-item>

                <el-form-item label="订单来源">
                  <el-select v-model="listQuery.sourceType" placeholder="请选择订单来源">
                  <el-option v-for="item in sourceTypeOptions" 
                      :key="item.value"
                      :label="item.label" 
                      :value="item.value"
                      >
                    </el-option>  
                  </el-select>
                </el-form-item>
 
                <el-form-item label="下单时间">
                   <el-date-picker
                      v-model="listQuery.orderTime"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期" 
                      >
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="收货人:"  >
                  <el-input v-model="listQuery.receiverName" style="width:150px" placeholder="请输入收货人姓名"></el-input>
                </el-form-item>
          
            </el-form>
          </div>  
       
        <el-table  
          ref = 'multipleSelection'
          :data="list" 
          v-loading="listLoading" 
          border    
          style="width: 100%" 
          @selection-change="handleSelectionChange"
        >
        <el-table-column
          type="selection" 
          width="55"
          >
        </el-table-column>
          <el-table-column  align="center"   label="编号"  width="80"> 
            <template slot-scope="scope">
              {{scope.$index + 1 + (listQuery.pageNum - 1) * listQuery.pageSize }}
            </template> 
          </el-table-column>

        <el-table-column  prop="orderSn"  align="center"  label="订单编号"  width="130"></el-table-column>
        <el-table-column  prop="memberUsername"  align="center"  label="用户账号"  width="140"></el-table-column>
        <el-table-column  prop="orderTime"  align="center"  label="下单时间"  width="170"></el-table-column>
        <el-table-column  prop="totalAmount"  align="center"  label="订单金额"  width="100"></el-table-column>
    
        <el-table-column  align="center"  label="支付方式" width="150"> 
          <template slot-scope="scope">
            {{scope.row.payType | formatPayType}} 
          </template>
        </el-table-column>

        <el-table-column  align="center"  label="订单来源" width="150"> 
          <template slot-scope="scope">
            {{scope.row.sourceType | formatSourceType}} 
          </template>
        </el-table-column>

        <el-table-column  align="center"  label="订单状态" width="150"> 
          <template slot-scope="scope">
            {{scope.row.status | formatStatus}} 
          </template>
        </el-table-column>
  
            <el-table-column   label="操作" align="center"  >
              <template slot-scope="scope">
                <el-button  size="mini"  @click="handleLookOrder(scope.row)" >查看订单</el-button>

                <el-button size="mini" v-show="scope.row.status === 0 "
                type="danger" @click="handleColseOrder(scope.row)" > 关闭订单 </el-button>

                <el-button size="mini" v-show="scope.row.status === 1 "
                type="warning" @click="handleDeliveryOrder(scope.row)" > 订单发货 </el-button>

                <el-button size="mini" v-show="scope.row.status === 2 || scope.row.status === 3 "
                type="primary" @click="handleLookLogistics(scope.row)" > 订单跟踪 </el-button>

                <el-button size="mini" v-show="scope.row.status === 4 "
                type="danger" @click="handleDeleteOrder(scope.row)" > 删除订单 </el-button>

              </template>
          </el-table-column> 
        </el-table>  

        <!-- 批量操作列表 -->
        <div class="many-operate-container">
            <el-select  size="small" v-model="operatesType"  placeholder="批量操作列表">
              <el-option
                v-for="item in operatesOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value" 
                >
              </el-option>
            </el-select>

              <el-button size="mini" 
                type="danger"
                @click="handleManyOperate()" style="margin-left:10px" >
                确定
                </el-button>

        </div> 

        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="listQuery.pageNum"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="listQuery.Size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
        </div>  
           
      </el-card>

    <!-- 物流跟踪 -->
    <logisticsDialog v-model="logisticsDialogVisible" :LogisticsList="LogisticsList"></logisticsDialog>

    <!-- 关闭订单 -->
    <el-dialog
      title="关闭订单"
      :visible.sync="closeOrder.dialogVisible"
      width="30%" >
     
      <div>
        <el-input v-model="closeOrder.content" :rows="5" type="textarea" placeholder="请输入关闭订单的原因"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeOrder.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCloseOrderConfirm">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import  logisticsDialog from './components/logisticsDialog'

  import {getOrderList,closeOrder,deleteOrder} from '@/api/orderApi'
  const defaultListQuery = {
    pageNum:1,
    pageSize:5,
    orderSn: null, // 订单编号
    status:null, // 订单状态
    orderType:null, // 订单分分类
    sourceType:null, // 订单来源
    orderTime:null, // 下单时间
    receiverName:null // 收货人姓名
  }
export default {
  name: 'index',
  data(){
    return {
      listQuery: Object.assign({},defaultListQuery),
      // 关闭订单
      closeOrder:{
        dialogVisible: false,
        content:null,
        orderIds:[]
      },
      // 订单状态
      statusOptions:[
        {label:'待付款',value:0},
        {label:'待发货',value:1},
        {label:'已发货',value:2},
        {label:'已完成',value:3},
        {label:'已关闭',value:4},
        {label:'无效订单',value:5}
      ],
      // 订单分类
      orderTypeOptions:[
        {label:'正常订单',value:0},
        {label:'活动订单',value:1} 
      ],
      // 订单来源
      sourceTypeOptions:[
        {label:'PC订单',value:0},
        {label:'APP订单',value:1} 
      ],
      // 批量操作
      operatesOptions:[
        {label:'批量发货',value:1},
        {label:'关闭订单',value:2},
        {label:'删除订单',value:3}
      ],
      operatesType:null,
      // 列表的数据
      list:[],
      // 总记录数
      total:null,
      // 存放多选的订单内容
      multipleSelection:[],
      // 加载动画控制
      listLoading: false,
      // 控制物流面板的显示与隐藏
      logisticsDialogVisible: false,
      LogisticsList:[
        {
            name: '订单已提交，等待付款',
            time: '2022-01-01 09:00:00 '
        },
        {
            name: '订单付款成功',
            time: '2022-01-01 09:00:00 '
        },
        {
            name: '在上海市进行下级地点扫描，等待付款',
            time: '2022-01-01 09:00:00 '
        },
        {
            name: '在分拨中心上海公司进行卸车扫描，等待付款',
            time: '2022-01-01 09:00:00 '
        },
        {
            name: '在上海公司进行发出扫描',
            time: '2022-01-01 09:00:00 '
        },
        {
            name: '到达目的地网点上海公司，快件将很快进行派送',
            time: '2022-01-01 09:00:00 '
        },
        {
            name: '订单已签收，期待再次为您服务',
            time: '2022-01-01 09:00:00 '
        }
    ]
    }
  },
  components:{
    logisticsDialog
  },
  created(){
    this.getList()
  },
  methods:{

    // 0 物流跟踪
    handleLookLogistics(row){
      this.logisticsDialogVisible = true 
    },

    // 1 搜索列表
    handleSearchList(){
      this.listQuery.pageNum = 1
      this.getList()
    },

    // 2 清空搜索条件
    handleResetSearch(){ 
      this.listQuery = Object.assign({},defaultListQuery)
      this.getList()
    },

    // 3 请求网络数据
    async getList(){
      // this.listQuery
      let res = await getOrderList(this.listQuery)
      if(res && res.status == 1){
        this.list = res.data.list
        this.total = res.data.total
      }  
    },

    // 4 多选处理 列表复选框 批量选择
    handleSelectionChange(val){ 
      this.multipleSelection = val 
    } ,

    // 5 查看订单
    handleLookOrder(row){
        this.$router.push({
          path:'/om/detail',
          query:{
            id: row.id
          }
        })
    }, 

    // 6 关闭订单
    handleColseOrder(row){
      this.closeOrder.dialogVisible = true
      this.closeOrder.orderIds = [row.id] 
    },

    //  确认关闭订单
    async handleCloseOrderConfirm(){
      if(this.closeOrder.content === null || this.closeOrder.content === ''){
         this.$message.warning('关闭订单的理由不能为空'); return; 
      }else{
         // 发起关闭订单的请求
        let res = await closeOrder({
              ids:this.closeOrder.orderIds,
              note:this.closeOrder.content
            });
        if(res.status === 1){
            // 清空数据
            this.closeOrder.orderIds = [];
            this.closeOrder.content = null; 
            // 隐藏面板
            this.closeOrder.dialogVisible = false;  
            // 重新请求数据
            this.getList();
            // 操作状态提示信息
            this.$message.success(res.msg);
        }else{
          this.$message.error(res.msg)
        } 
      }
    },

    // 7  改变每页显示条数
    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      // 重新加载数据
      this.getList();
    },

    // 8 当前页码发生改变
    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      // 重新加载数据
      this.getList();
    },

    // 9 订单发货
    handleDeliveryOrder(row){
      let listItem = dealProductOrder(row)
      this.$router.push({
        path:'/om/deliver',
        query:{
          id:row.id,
          listData: [listItem]
        }
      })
    }, 
    // 10 删除订单
    handleDeleteOrder(row){
      // 所有订单
      let ids = [];
      ids.push(row.id)
      this.deleteOrder(ids)
    }, 
    //  封装删除方法
    deleteOrder(ids){
      this.$confirm('确定要删除该订单吗?','提示',{
          type:'warning'
        }).then(()=>{
           // 调用删除订单的接口
           deleteOrder({ids}).then(res=>{
              if(res.status === 1){ 
                  // 隐藏面板
                  this.closeOrder.dialogVisible = false;  
                  // 重新请求数据
                  this.getList();
                  // 操作状态提示信息
                  this.$message.success(res.msg);
              }else{
                this.$message.error(res.msg)
              } 
           }).catch(error=>{

           })
        }).catch(err=>{
          this.$message.info('已取消删除')
      })
    },

    // 11 批量操作
    handleManyOperate(){
      // 11.1 判断订单不能为空
      if(this.multipleSelection.length <= 0 ){
         this.$message.warning('请选择要批量操作的订单!');
         return 
      }
      if(this.operatesType === null){
        
      }
  
      // 11.2 批量发货
      if(this.operatesType === 1){
         let list = []; 
         for(let i=0;i<this.multipleSelection.length;i++){
            let order = this.multipleSelection[i]
            // 筛选所有待发货的订单
            if(order.status === 1){
              list.push(this.deleteOrder(order))
            } 
         }
 
         if(list.length === 0){
            this.$message.warning('没有要发货的选中订单!');
            return 
         }

         // 跳转至批量发货
        this.$router.push({
          path:'/om/deliver',
          query:{ 
            listData: list
          }
        })
        return 

      }else if(this.operatesType === 2){
        // 11.3 批量关闭订单
        for(let i=0;i<this.multipleSelection.length;i++){ 
           if(this.multipleSelection[i].status !== 4){
              this.closeOrder.orderIds.push(this.multipleSelection[i].id)
            }  
        } 

        if(this.closeOrder.dialogVisible === 0){
            this.$message.warning('没有要关闭的选中订单!');
            return 
         }

        this.closeOrder.dialogVisible = true 
      }else if(this.operatesType === 3){
        // 11.4 批量删除订单
        let ids = []
        for(let i=0;i<this.multipleSelection.length;i++){  
          ids.push(this.multipleSelection[i].id) 
        } 
        this.deleteOrder(ids)
      }else{
        this.$message.warning('请选择要批量操作的行为!');
        return 
      }  
    },

    // 12 处理发货的 接收数据
    dealProductOrder(order){
      return  {
        orderId:order.id,
        orderSn:order.orderSn,
        receiverName: order.receiverName,
        receiverPhone:order.receiverPhone,
        receiverPostCode:order.receiverPostCode,
        receiverDetailAddress:order.receiverDetailAddress,
        deliverySn: null,
        deliveryCompany: null
      }
    }

  },
  filters:{
    formatPayType(value){
      if(value === 1){
        return '支付宝'
      }else if(value === 2){
        return '微信'
      }else{
        return '未支付'
      }
    },
    formatSourceType(value){
      switch(value){
        case 0: 
          return 'pc订单';
        case 1: 
          return 'APP订单'; 
        default: 
          return '其它订单'   
      }
    },
    formatStatus(value){
      switch(value){
        case 0: 
          return '待付款';
        case 1: 
          return '待发货'; 
        case 2: 
          return '已发货';  
        case 3: 
          return '已完成'; 
        case 4: 
          return '已关闭';  
        case 5: 
          return '无效订单';  
        default: 
          return ''   
      }
 
    }
  }
}
</script>
